/**
 * create and render bar graph of GPAs over term
 */
function course() {
	vis_bar = new pv.Panel();
	// Set main parameters for visualization, see "scatterplot.js" for more details
	var marginL = 30,
		marginR = 10,
		w = winW-marginL-marginR-interactionsWidth-60, 
		h = winH*0.70,
		x = pv.Scale.ordinal(pv.range(data.length)).splitBanded(0, w, 4/5),
        y = pv.Scale.linear(0, 4.5).range(0, h);
	
	// Set the color accessor function based on semester
	var col = function(v) {
		if (v == 'Fall') return pv.Colors.category20().range()[2].color;
		if (v == 'Spring') return pv.Colors.category20().range()[0].color;
		return pv.Colors.category20().range()[4].color;
	};
	// Set the highlight color accessor function based on semester
	var col_light = function(v) {
		if (v == 'Fall') return pv.Colors.category20().range()[3].color;
		if (v == 'Spring') return pv.Colors.category20().range()[1].color;
		return pv.Colors.category20().range()[5].color;
	};
	
	// Set main visualization parameters
	vis_bar.width(w)
		.height(h)
		.bottom(30)
		.left(marginL)
		.right(marginR)
		.top(5);
		
	// Add a subroot panel
	var bar = vis_bar.add(pv.Panel)
		.data(function() data)
		.left(function() pv.Scale.ordinal(pv.range(data.length)).splitBanded(0, w, 4/5)(this.index))
	  .add(pv.Panel) // group bar and label in a subpanel for redraw
        .def("active", false)
      .add(pv.Bar) // Add actual bars to bar chart
	 	.bottom(0)
		.height(function(d) y(d.GPA)) // height based on GPA
		// Scaled function of how many bars and width of visualization
		.width(function() pv.Scale.ordinal(pv.range(data.length)).splitBanded(0, w, 4/5).range().band)
		// Set color to be either normal or highlighted if parent is "active"
		.fillStyle(function(d) this.parent.active() ? col_light(d.Semester) : col(d.Semester))
		// Set events for hover and click
		.event("mouseover", function() this.parent.active(true))
        .event("mouseout", function() this.parent.active(false))
		.event("click", function(d) openMyModal('pie.php?sectionID=' + d.SectionID));

	
	
	/* GPA Value */
	bar.anchor("top").add(pv.Label)
		.textStyle("white")
		.text(function(d) d.GPA)
		.font(function() fontFunc());

	/* Professor Name */
	bar.anchor("center").add(pv.Label)
		.textMargin(5)
		.textStyle(function() this.parent.active() ? "#463E3F" : "black") // Change color based on hover
		.textAlign("center")
		.text(function(d) d.LastName)
		.font(function() fontFunc())
		// Change text orientation if there are few bars
		.textAngle(function() data.length < 10 ? 0 : -Math.PI / 2);

	/* y-axis ticks. */
	vis_bar.add(pv.Rule)
		.data(y.ticks(4))
		.strokeStyle("rgba(255, 255, 255, .5)")
		.bottom(y)
	  .anchor("left").add(pv.Label)
		.text(y.tickFormat)
		.font("20px sans-serif");

	/* x-axis labels */
	bar.anchor("bottom").add(pv.Label)
		// Only show year when parent is active or if it's the first and last section id and sortby date
		.visible(function(d) {
			if ((d.SectionID == data[0].SectionID || d.SectionID == data[data.length-1].SectionID) && sort_type == "date") {
				return true;
			}
			return this.parent.active();
		})
		.textAlign("center")
		.textBaseline("top")
		.text(function(d) d.Year)
		.font("14px sans-serif");
		
	/* x-axis */	
	vis_bar.add(pv.Rule)
		.bottom(-14)
		
	/* Legend color legend */
	vis_bar.add(pv.Bar)
		.data(["Spring", "Summer", "Fall"])
		.bottom(-29)
		.height(12)
		.width(12)
		.left(function(d) this.index  * 70) //* 70)
		.fillStyle(function(d) col(d))
		.lineWidth(null)
	  .anchor("right").add(pv.Label)
		.textAlign("left")
		.text(function(d) d)
		.font("12px sans-serif");
	
	vis_bar.render();
}

// Determines the correct font size for the labels based on the number of data points
function fontFunc() {
	if (data.length < 10)
		return 20 + "px sans-serif";
	if (data.length < 15)
		return 18 + "px sans-serif";
	if (data.length < 20)
		return 16 + "px sans-serif";
	if (data.length < 30)
		return 14 + "px sans-serif";		
	return 10 + "px sans-serif";
}
